Unless you're a regular Neocities user and aren't familiar with the old internet, you might not have heard of a blinkie (also known as a 88x31, badge, microbanner, there's many names for it).

The easiest way to describe them is as a small rectangular graphic, it's either made as a static image or a gif with a few frames.

It was a fun way to make small, funny images or ads while saving space on early computers and websites.

Which is why I'll be showing you some basic steps on how to make your own blinkies, you can make them on any photo editing program like Photoshop, GIMP, or Photopea.

Step 1 - Making your Canvas - Pick an image size you want your blinkie to be, but I'll be honest, 150x20 is a perfect starting point

File -> New -> Width: 150 px, Height: 20 px.

Before Anything Else - Make your file - So no matter what program you're using, you're going to want to make your own file to save your work.

So if you've got Photoshop or GIMP opened up, go to "File" and then "Save As" you will see a save box around the lines of "Unamed.PSD" (Unamed.XCF If you're using GIMP) rename the file to whatever you want and then click the save button and put the file wherever you want, now you can save your progress!

Congrats, the 2nd hardest part is over (Don't worry the next step is the fun part)

Step 2- Making the Blinkie Art - So this is when you'll have all the freedom you want to add whatever you want to your blinkie, you can use the Fill Bucket tool to change the general background color of the blinkie and add images, drawings and text to the blinkie. Though fair warning that since you're going old school with this, you'll have to be extra creative since you have a very limited amount of space to work with

Alright so let's say you're done, you're satisfied with everything you made. Now we're going to make layers

Step 3 - Learning about Layers - If you go to the bottom right part of the screen, you will see a layers section, your layer should be named as "background"

Right click on the "background" layer and you'll see a list of options and click on "duplicate layer"

Now you've got a copy of blinkie, you'll likely want to add some text onto the blinkie, which will be it's own layer

I've got to stop for a second to explain the big thing about layers, it's all about the order like this

• Text
• Background layer
• Background layer copy

Also keep in mind that you can easily move the order of the layers by left-clicking and dragging them up or down on a layer

The text must be on top of the background layer

Once you're done with the text, it's time to merge the layers

Right click the top-most layer and you'll see a list of options, click on "Merge Down"

Both the "Text" and "Background layer"(or the copy of it will be combined)

Now you'll have two layers, the combined one and the copy, you're free to make another copy of the copy layer if you want

To rename a layer, double-click on a the name of the layer and the option will appear, you're going to want to rename the new merged layer into "Frame #1"

Step 4 - Edit your background copy - Next, you're free to make any cool edits to the copy layer since you'll want your next frame to be different from the first one

So let's say you finished your edits and you made another text layer to change things up

Move your new "Text" layer to the top, and the new edited "background" layer right below it and use the "Merge Down" option on "Text" layer, as before, you'll get one merged layer, rename it to "Frame #2"

Ok so this is probably how your layers setup is like now

• Frame #2
• Frame #1
• Background layer copy

You can arrange it so "Frame #1" goes at the very top

So you can just delete the "background layer copy" since that won't be a part of the blinkie gif, so simply right click on it and click "Delete Layer"

Now here's the hardest part, it's a little much to remember, but it'll be worth the effort"

Go to "File" then "Export As"

You'll see a typical save box, "Unamed.png but here's the tricky part, you're going to change the format manually to be a gif, Unamed.gif and then click Save

You may see a box that will ask you to crop, simply click on the "crop"

You're going to see a box with a bunch of options named "Export Image as GIF" you'll only need to select a couple options, so here's the order

Click on the "As Animation" check box and then click on the "Use delay as entered for all frames the first option is so the two frames play continously and the second one is so the frames don't change immediately, you don't want your gif to play too fast

Next go to the middle box that says "Delay between frames where unspecified [_____] milliseconds"

This box is so you can alter how long the delay for each from goes, you obviously want something that's not too slow or fast, so I'd say around maybe 1000 milliseconds is a good number to go with

After that, just click on "Export and you're done! Just click on your new blinkie image to make sure everything is to your liking!

Congrats! You've made your first blinkie! Enjoy customizing your webpage!